<template>
    <div>
      <!-- 头部菜单 -->
      <div class="h-top">
        <header class="banxin1 tanxin">
          <div class="h-left"></div>
          <ul class="tanxin">
            <li class="on">发现音乐</li>
            <li>我的音乐</li>
            <li>关注</li>
            <li>商城</li>
            <li>音乐人</li>
            <li class="h-hot">下载客户端 <span></span></li>
          </ul>
          <div class="h-right tanxin">
            <div style="display:inline-block;position:relative">
              <input placeholder="音乐/视频/电台/用户"
                     type="text"
                     class="h-input"
                     v-model="ipt"
                     @input="querySuggest">
              <div class="rap"
                   v-show="ipt">
                <div class="f-cb"
                     v-for="item in suggestText"
                     :key="item.title">
                  <h3><i :class="item.icon"></i>{{ item.title }}</h3>
                  <ul>
                    <li v-for="it,index in item.content"
                        :key="index"
                        class="elli s-li">{{ it.name }}</li>
                  </ul>
                </div>
              </div>
            </div>
            <button>创作者中心</button>
            <img src=""
                 alt=""
                 v-show="false">
            <a href="#"
               @click.prevent="openLogin">登录</a>
          </div>
        </header>
      </div>
      <!-- 菜单子元素 -->
      <div class="h-foot">
        <ul class="banxin1 tanxin">
          <li v-for="item in children"
              :key="item.name"
              :class="{active:$route.path===item.link}"
              @click="$router.push(item.link)">{{ item.name }}</li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  import { suggest } from '@/assets/js/request'
  export default {
    data() {
      return {
        children: [
          { name: '推荐', link: '/' },
          { name: '排行榜', link: '/rankingList' },
          { name: '歌单', link: '/playList' },
          { name: '主播电台', link: '/station' },
          { name: '歌手', link: '/singer' },
          { name: '新碟上架', link: '/plate' },
        ],
        //搜索框
        ipt: '',
        // 搜索建议
        suggestText: [
          { title: '单曲', icon: 'icon-1', content: [{ id: null, name: '' }] },
          { title: '歌手', icon: 'icon-2', content: [{ id: null, name: '' }] },
          { title: '专辑', icon: 'icon-3', content: [{ id: null, name: '' }] },
          { title: '歌单', icon: 'icon-4', content: [{ id: null, name: '' }] },
        ],
      }
    },
    methods: {
      openLogin() {
        this.$store.commit('changeOpenLogin', true)
      },
      //输入建议
      querySuggest() {
        let keywords = this.ipt
        suggest({ keywords }).then((res) => {
          if (res.code == 200) {
            this.suggestText.forEach((item, index) => {
              item.content = res.result[res.result.order[index]]
            })
          }
        })
      },
    },
  }
  </script>
  
  <style lang="less" scoped>
  @import '@/assets/css/base.less';
  .elli {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .h-top {
    width: 100%;
    height: 70px;
    background-color: @black;
    header {
      .h-left {
        background: url(../assets/image/topbar.png) no-repeat 0 9999px;
        width: 177px;
        height: 70px;
        background-position: 0 0;
        cursor: pointer;
        a {
          width: 157px;
          height: 100%;
          padding-right: 20px;
          text-indent: -9999px;
        }
      }
      ul {
        li {
          color: #ccc;
          height: 70px;
          padding: 20px;
          font-size: 14px;
          line-height: 30px;
          position: relative;
          box-sizing: border-box;
          cursor: pointer;
          &:hover {
            color: #fff;
            background-color: #000;
          }
        }
        .on {
          color: #fff;
          background-color: #000;
          &::after {
            content: '';
            background: url(../assets/image/topbar.png) no-repeat 0 9999px;
            display: block;
            position: absolute;
            left: 50%;
            top: 64px;
            width: 12px;
            height: 7px;
            margin-left: -6px;
            overflow: hidden;
            background-position: -226px 0;
          }
        }
        .h-hot {
          span {
            position: absolute;
            background: url(../assets/image/topbar.png) no-repeat 0 9999px;
            top: 21px;
            left: 100px;
            width: 28px;
            height: 19px;
            background-position: -190px 0;
            display: block;
          }
        }
      }
      .h-right {
        gap: 20px;
        justify-content: space-between;
        margin-left: 70px;
        .h-input {
          width: 158px;
          height: 32px;
          background: url(../assets/image/topbar.png) no-repeat 0 9999px;
          background-position: 0 -99px;
          background-color: #fff;
          border-radius: 32px;
          padding-left: 30px;
          box-sizing: border-box;
          outline-style: none;
          border: 0;
          font-size: 12px;
        }
        .rap {
          width: 238px;
          position: absolute;
          background-color: #fff;
          overflow: auto;
          text-align: left;
          box-shadow: 0 4px 7px #555;
          text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
          border-radius: 4px;
          border: 1px solid #bebebe;
          top: 40px;
          left: 0;
          z-index: 120;
          .f-cb {
            h3 {
              line-height: 17px;
              padding: 10px 0 0 10px;
              width: 52px;
              font-size: 14px;
              display: inline-block;
              vertical-align: top;
              i {
                margin: 2px 4px 0 0;
                width: 14px;
                height: 15px;
                display: inline-block;
                background: url(@/assets/image/icon.png) no-repeat 0 9999px;
                vertical-align: middle;
              }
              .icon-1 {
                background-position: -35px -300px;
              }
              .icon-2 {
                background-position: -50px -300px;
              }
              .icon-3 {
                background-position: -35px -320px;
              }
              .icon-4 {
                background-position: -50px -320px;
              }
            }
            ul {
              display: inline-block;
              width: 176px;
              padding: 6px 0 5px;
              border-top: 1px solid #e2e2e2;
              border-left: 1px solid #e2e2e2;
              box-sizing: border-box;
              .s-li {
                width: 100%;
                text-indent: 12px;
                line-height: 24px;
                cursor: pointer;
                color: #333;
                font-size: 12px;
                padding: 0;
                height: 24px;
                &:hover {
                  background-color: #ccc;
                }
              }
            }
          }
        }
  
        button {
          color: #ccc;
          width: 90px;
          height: 32px;
          box-sizing: border-box;
          border-radius: 20px;
          line-height: 30px;
          font-size: 12px;
          background-color: rgba(0, 0, 0, 0);
          border: 1px solid #ccc;
          &:hover {
            color: #fff;
            border-color: #fff;
          }
        }
        a {
          color: #787878;
          display: block;
          font-size: 12px;
          &:hover {
            color: #999;
            text-decoration: underline;
          }
        }
      }
    }
  }
  .h-foot {
    width: 100%;
    height: 34px;
    background-color: #c20c0c;
    border-bottom: 1px solid #a40011;
    ul {
      padding-left: 180px;
      justify-content: flex-start;
      gap: 10px;
      box-sizing: border-box;
      li {
        display: inline-block;
        height: 20px;
        padding: 0 13px;
        margin: 7px 17px 0;
        border-radius: 20px;
        line-height: 21px;
        cursor: pointer;
        color: #fff;
        font-size: 12px;
        &:hover {
          background-color: #9b0909;
        }
      }
      .active {
        background-color: #9b0909;
      }
    }
  }
  </style>